<template>
	<view>
		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="title">验证手机号</view>
				<view class="phone">
					<input style="width: 240rpx;" type="number" name="phone" placeholder="请输入手机号" maxlength="11"
						v-model="mobile" />
					<view v-if="showText" class="t-c" @tap="getCode()">获取验证码</view>
					<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
				</view>
				<view class="yzm">
					<input type="number" name="code" maxlength="4" placeholder="请输入验证码" v-model="captcha" />
				</view>
				<view class="tips">未注册手机号验证成功后将为您创建新账号</view>
				<button @tap="login()">确 定</button>
				<uni-icons @click="close" class="closeempty" type="closeempty" size="24"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				captcha: '',
				captchaToken:"",
				second: 60,
				showText: true,
				linkUrl:"",
				urlObj:{},
				b:"",
				channelNo:""
			}
		},
		methods: {
			close() {
				this.$refs.popup.close()
			},
			open(linkUrl,urlObj,b,channelNo) {
				this.linkUrl = linkUrl
				this.urlObj = urlObj
				this.b = b
				this.channelNo = channelNo
				this.$refs.popup.open("bottom")
			},
			async login() {
				let res = await this.testMobile()
				if (res) {
					if (!this.captcha) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					}
					if(!this.captchaToken){
						uni.showToast({
							title: '验证码输入有误',
							icon: 'none'
						});
						return
					}
					// let codeReg = /^[0-9]\d{5}$/; //验证码正则
					// if (!codeReg.test(this.captcha)) {
					// 	uni.showToast({
					// 		title: '验证码输入有误',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					uni.request({
						url: `${this.urlObj.api_two}/user-service/app/userInfo/loginByMobileCode_V2`,
						method: 'GET',
						data:{
							mobile:this.mobile,
							captcha:this.captcha,
							captchaToken:this.captchaToken,
							channelNo:this.channelNo
						},
						success: (res) => {
							if(res.data.code == 0){
								console.log(this.linkUrl)
								window.location.href = this.linkUrl
							}else{
								uni.showToast({
									icon: 'none',
									title:res.data.message
								})
							}
						}
					})
					
				}
			},
			async getCode() {
				let res = await this.testMobile()
				if (!res) return
				this.showText = false;
				var interval = setInterval(() => {
					var times = this.second - 1;
					this.second = times;
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					this.second = 60;
					this.showText = true;
				}, 60000);
				uni.request({
					url: `${this.urlObj.api_two}/misc-service/sms/send?mobile=${this.mobile}`,
					method: 'GET',
					success: (res) => {
						if(res.data.code == 0){
							this.captchaToken = res.data.data
							this.showText = false;
						}else{
							uni.showToast({
								icon: 'none',
								title:res.data.message
							})
						}
						
					}
				})
			},
			testMobile() {
				return new Promise((resolve, reject) => {
					let mobile = parseInt(this.mobile);
					if (!mobile) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						resolve(false)
						return false
					} else {
						let mobileReg = /^1[3456789]\d{9}$/
						if (!mobileReg.test(mobile)) {
							uni.showToast({
								title: '手机号码有误',
								icon: 'none'
							});
							resolve(false)
						} else {
							resolve(true);
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 40rpx;
		box-sizing: border-box;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #fff;
		position: relative;

		.closeempty {
			position: absolute;
			right: 40rpx;
			top: 38rpx;
			color: #999;
		}

		.title {
			text-align: center;
			font-size: 34rpx;
			color: #000;
			font-weight: bold;
			margin-bottom: 100rpx;
		}

		.phone {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #e5e5e5;
			color: #777;
			font-size: 28rpx;
		}

		.t-c {
			background: #33c2b4;
			color: #fff;
			font-size: 24rpx;
			border-radius: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 25rpx;
			z-index: 10;
		}

		.yzm {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #e5e5e5;
			color: #777;
			font-size: 28rpx;
		}
		.tips{
			font-size: 24rpx;
			color: #777;
			margin-top: 15rpx;
		}
		button {
			margin-top: 100rpx;
			font-size: 28rpx;
			background: #5677fc;
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
			box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
		}
	}
</style>